<template>
	<div class="box">
		<!-- 自选 现货 合约-->
		<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
			<div class="tag">
				<div class="title">
					欧神今日行情
				</div>
				<div class="content">
					支持的数百种数字货币的最新价格、每日涨跌幅、市值等实时数据。
				</div>
			</div>
			<el-tab-pane label="自选" name="first">
				<Optional></Optional>
			</el-tab-pane>
			<el-tab-pane label="现货" name="second">
				<Optional></Optional>
			</el-tab-pane>
			<el-tab-pane label="合约" name="third">
				<Optional></Optional>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script lang="ts" setup>
import Optional from './components/Optional.vue';
import type { TabsPaneContext } from 'element-plus';

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event);
}

</script>
<style lang="scss" scoped>
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item,
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav,
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav,
::v-deep .el-tabs--card>.el-tabs__header {
	border: none;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
	font-family: Microsoft YaHei, Microsoft YaHei;
	font-weight: bold;
	font-size: 28px;
	color: #86909C;
	padding-left: 0;
}

::v-deep .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) {
	padding-left: 0;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {

	font-family: Microsoft YaHei, Microsoft YaHei;
	font-weight: bold;
	font-size: 34px;
	color: #000000;
}

.box {
	margin-top: 40px;

	.tag {
		margin-top: 10px;
		padding: 20px;
		background: #FFFFFF;
		border-radius: 10px 10px 10px 10px;
		border: 1px solid #E5E6EB;

		.title {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: bold;
			font-size: 20px;
			color: #000000;
		}

		.content {
			margin-top: 20px;
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 14px;
			color: #86909C;
		}
	}
}
</style>
